<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <div class="header">
                <Step
                    ref="stepRef"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length" />
            </div>
            <div class="container step-box">
                <!-- 活动信息 -->
                <div v-show="currentStep == 1">
                    <ActivityInfo
                        ref="ActivityInfoRef"
                        :page-type="pageType"
                        :group_id="group_id"
                        @submit="onChildValid" />
                </div>
                <div v-show="currentStep == 2">
                    <EnvelopeRules ref="EnvelopeRulesRef" :page-type="pageType" @submit="onChildValid" />
                </div>
                <div v-show="currentStep == 3">
                    <ActivitiesSet ref="ActivitiesSetRef" :page-type="pageType" @submit="onChildValid" />
                </div>
                <div v-show="currentStep == 4">
                    <Welcome
                        ref="WelcomeRef"
                        :filters="[]"
                        :max-num="8"
                        :page-type="pageType"
                        :welcome-type="true"
                        @submit="onSubmit" />
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-if="currentStep == 1" @click="onRouter">取消</el-button>
            <el-button v-else @click="onStep">上一步</el-button>
            <el-button v-if="currentStep != 4" type="primary" @click="onNext(currentStep)">下一步</el-button>
            <el-button v-else type="primary" @click="onNext(currentStep)">{{
                pageType == 'look' ? '返回' : '保存'
            }}</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Welcome from '@/components/welcome/ZWelcome.vue';
import Step from '@/components/Step.vue';
import { onMounted, ref, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { getSetionId } from '@/utils/utils';
import { passwordCreate, passwordInfo, passwordEdit } from '@/api/smartMarketing/order';
import ActivityInfo from './components/ActivityInfo.vue';
import EnvelopeRules from './components/EnvelopeRules.vue';
import ActivitiesSet from './components/ActivitiesSet.vue';
import { useStore } from '@/store';
const store = useStore();

const router = useRouter();
const route = useRoute();
const stepRef: any = ref(null);
let pageType = route.query.type;
const ActivityInfoRef: any = ref(null);
const EnvelopeRulesRef: any = ref(null);
const ActivitiesSetRef: any = ref(null);
const WelcomeRef: any = ref(null);
const group_id = ref(Number(route.query?.group_id));
const redInfo = ref({
    title: '',
    red_num: 0
});
const stepsLabel: any = ref([
    { title: '活动信息', stepIndex: 1 },
    { title: '红包规则', stepIndex: 2 },
    { title: '活动设置', stepIndex: 3 },
    { title: '引流设置', stepIndex: 4 }
]);
const currentStep = ref(1);
const scrollbarRef = ref<any>(null);
/**
 * @description: 滚动到顶部
 */
const setScrollTopHandle = () => {
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
const onStep = () => {
    currentStep.value--;
    stepRef.value.back();
    setScrollTopHandle();
};
const onChildValid = (v: number, num: number) => {
    currentStep.value++;
    stepRef.value.next();
    setScrollTopHandle();
    if (v == 2) {
        ActivitiesSetRef.value.redInfo.red_num = num;
    }
};
const onRouter = () => {
    store.dispatch('setGroupId', ActivityInfoRef.value.formData.group_id);
    router.back();
};
const onNext = async (curStep: number) => {
    if (pageType == 'look') {
        currentStep.value == 4 && onRouter();
        currentStep.value++;
        stepRef.value.next();
        setScrollTopHandle();
        return;
    }
    switch (curStep) {
        case 1:
            ActivityInfoRef.value.onSubmit();
            break;
        case 2:
            EnvelopeRulesRef.value.onSubmit();
            break;
        case 3:
            ActivitiesSetRef.value.onSubmit();
            break;
        case 4:
            if (pageType == 'look') {
                onRouter();
                return;
            }
            WelcomeRef.value.onSubmit();
            break;
    }
};

const onSubmit = async () => {
    const welcome = {
        ...WelcomeRef.value.formData
        // welcome_switch: WelcomeRef.value.welcome_flag
    };
    welcome.welcome_switch = WelcomeRef.value.welcome_flag || 2;
    const params = {
        ...ActivityInfoRef.value.formData,
        ...EnvelopeRulesRef.value.formData,
        ...ActivitiesSetRef.value.formData,
        ...welcome,
        welcome_info: WelcomeRef.value.formData.materialResult.welcome_info // 使用欢迎语组件数据
    };
    pageType ? await passwordEdit(params) : await passwordCreate(params);
    ElMessage.success(`${pageType ? '编辑' : '新建'}成功`);
    router.push({
        path: '/smartMarketing/interact/order',
        query: { group_id: ActivityInfoRef.value.formData.group_id }
    });
};
const getLook = async () => {
    const res = await passwordInfo({ activity_id: route.query.id });
    ActivityInfoRef.value.formData = {
        activity_id: res.activity_id,
        activity_name: res.activity_name,
        group_id: res.group_id,
        period_type: res.period_type,
        activity_time: res.activity_time,
        description: res.description
    };
    EnvelopeRulesRef.value.formData.red_type = res.red_type;
    EnvelopeRulesRef.value.formData.amount = res.amount;
    EnvelopeRulesRef.value.formData.min_amount = res.min_amount;
    EnvelopeRulesRef.value.formData.max_amount = res.max_amount;
    EnvelopeRulesRef.value.formData.red_num = res.red_num;

    ActivitiesSetRef.value.formData = {
        poster_type: res.poster_type,
        poster_id: res.poster_id,
        absolute_url: res.absolute_url,
        password_type: res.password_type,
        password_url: res.password_url,
        receive_desc: res.receive_desc,
        password_file_name: res.password_file_name
    };
    ActivitiesSetRef.value.getPosterUrl(res.poster_type, res.absolute_url);
    WelcomeRef.value.AllTags = res.tag_list;
    WelcomeRef.value.creators = res.user_list;
    Object.assign(WelcomeRef.value.formData, {
        user_list: getSetionId('id', res.user_list),
        // welcome_switch: res.welcome_switch,
        // welcome: {
        //   type: res.welcome.type,
        //   content: res.welcome.content,
        //   attachment: [],
        //   local_link: [],
        //   local_content: []
        // },
        welcome_type: res.welcome_type,
        link_img: res.link_img,
        link_title: res.link_title,
        link_desc: res.link_desc,
        tag_list: getSetionId('id', res.tag_list)
    });
    WelcomeRef.value.welcome_flag = res.welcome_switch;
    if (res.welcome_switch == 1) {
        WelcomeRef.value.formData.welcome = {
            materialResult: { elcome_info: res.welcome_info }
        };

        WelcomeRef.value.onLookData(res.welcome_info);
    } else {
        WelcomeRef.value.formData.welcome = {
            type: 1,
            content: '',
            attachment: [],
            local_link: [],
            local_content: []
        };
    }

    // let attachment = JSON.parse(JSON.stringify(res.welcome.attachment))
    // WelcomeRef.value.formData.welcome.attachment = []
};
onMounted(() => {
    pageType = route.query.type;
    if (pageType) {
        getLook();
    }
});
</script>

<style lang="scss" scoped>
.header {
    padding: 21px;
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 4px;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.container {
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 4px;
    opacity: 1;
    border: 1px solid #eaeaea;
    border-bottom: none;
    background: #fff;
    min-height: calc(100vh - 288px);

    .btn_box {
        // padding-top: 13px;
        // text-align: center;
        // border-top: 1px solid #d9d9d9;
        position: absolute;
        bottom: 0;
        left: 20px;
        height: 64px;
        width: calc(100% - 40px);
        box-sizing: border-box;
        padding-right: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: #fff;
        box-shadow: 0 0 10px 0 rgb(212 212 212 / 50%);
        border-radius: 2px;
    }
}

:deep(.welcome_container) {
    .content {
        padding: 0;

        .content-left {
            border-right: none;

            .list_item {
                // padding-left: 0;
            }
        }

        .content-right {
            padding: 0 24px 24px 48px;
            margin-top: -216px;
            border-left: 1px solid #eaeaea;

            .title {
                margin-bottom: 8px;
            }
        }
    }
}
</style>
